<template>
  <div class="formBox" style="width: 100%;height:100%;">
    <rx-fit>
      <div slot="toolheader" class="noprint" border="true" foldheader="true" foldbtn="false" align="right">
        <div style="padding-top:16px;padding-right: 16px;padding-bottom: 16px;">
          <a-button type="primary" id="btnPrint" >{{$ti18('rxForm.print','打印')}}</a-button>
        </div>
      </div>
      <div class="fitContainer">
        <div class="contents">
          <div class="fitContentBox" ref="printArea">

            <bpm-inst-info v-if="bpmInst" :bpmInst="bpmInst" />

            <rx-forms ref="rxForms" v-if="formType=='online'"> </rx-forms>
            <component ref="customForm" :is="formComponent" :pk="pk" v-else></component>
          </div>
        </div>
      </div>
    </rx-fit>
  </div>
</template>
<script>
  import {RxFit,Util} from '@lowcode/jpaas-common-lib';
  import ProcessToolBar from "./ProcessToolBar";
  import BpmInstApi from "@/api/bpm/core/bpmInst";
  import RxForms from "./RxForms";
  import FormPcApi from "@/api/form/core/formPc.js";
  import userState from "@/assets/js/userState";
  import formbase from '@/api/formbase';
  import BpmInstInfo from "./BpmInstInfo";

  export default {
    name: "bpm-inst-start",
    mixins:[userState,formbase],
    components: {
      ProcessToolBar,
      RxFit,
      RxForms,
      BpmInstInfo
    },
    data () {
      return {
        formType:"online",
        formComponent:"",
        pk:"",
        defId:"",
        instId:"",
        bpmInst:{}
      }
    },
    created() {

        this.initProcessConfig();
    },
    mounted(){

        this.initPrint("btnPrint","printArea");
    },
    methods: {
      initProcessConfig() {
          var params=  this.$route.params;
          this.defId=params.defId;
          this.instId=params.instId;

          var self_ = this;
          BpmInstApi.getProcessConfig(self_.defId).then(res => {
            if (!res.success) {
              this.$message.warning(res.message);
              return;
            }
            //处理表单配置。
            self_.handFormConfig(res.data);
            //加载表单。
            if (self_.formType == "online") {
              self_.initForm();
            } else {
              self_.initCustomForm();
            }
        })
      },
      initCustomForm() {
          if(this.instId=="-1"){
              return;
          }
        BpmInstApi.getPkByInstId(this.instId).then(res => {
          if (!res.success) {
            return;
          }
          this.pk = res.data;
        })
      },
      //处理表单配置。
      handFormConfig(conf){
          //startForm
          if( conf.startForm.formpc && conf.startForm.formpc.length>0){
             var form= conf.startForm.formpc[0];
             if(form && form.type=="custom"){
                 this.formType="custom";
                 this.formComponent=this.loadView(form.component) ;
                 return;
             }
          }
          //获取全局。
          if( conf.globalForm.formpc && conf.globalForm.formpc.length>0){
              var form= conf.globalForm.formpc[0];
              if(form && form.type=="custom"){
                  this.formType="custom";
                  this.formComponent=this.loadView(form.component);
                  return;
              }
          }
      },
      loadView(view)  { // 路由懒加载
          return () => import(`@/views/${view}`);
      },
      /**
      * 使用表单的数据进行合并。
      * @param formData
      */
      handOpenerData(formData){
          if(!window.opener || !window.opener.formData){
              return;
          }

          //处理从表单传递过来的数据。
          let formJson=window.opener.formData.formJson;
          if(typeof formJson=="string"){
              formJson=JSON.parse(formJson);
          }

          for(let item of formData){
              let data=formJson[item.alias];
              Object.assign(item.data,data);
          }

      },
      async initForm(){
        var params={defId:this.defId};
        if(this.instId){
          params.instId=this.instId;
        }

        let res =await BpmInstApi.getViewByDefId(params);
        if(!res.success){
          this.$message.warning(res.message);
          return;
        }
        var data=res.data;

        var formData=data.formData;

        //增加流程实例数据显示。
        this.bpmInst=data.bpmInst;

        //审批历史
        var histories=data.histories || [];
        //处理表单数据。
        this.handOpenerData(formData);


        var curUser=this.user;
        var contextData={
          type:"start",
          curUserId:curUser.userId,
          curUserName:curUser.fullName,
          account:curUser.account,
          deptId:curUser.deptId,
          curNodeId:"start",
          curNodeName:"开始节点",
          instId:this.instId,
          defId:this.defId,
          tenantId: curUser.tenantId,
          tenantLabel:curUser.tenantLabel,
          opinionHistorys:histories
        };
        this.$refs.rxForms.setData(formData,true,contextData,true);
      }
    }

  }
</script>
<style scoped>
  @media print {
    .noprint {
      display: none
    }
  }
  .formBox >>> .rx-fit{
      padding: 0;
  }
  .formBox >>> .fit-header.showBorder{
    box-shadow: 0px 1px 4px #dddddd;
  }
  .formBox >>> .divdefault{
    overflow: hidden;
  }
  .fitContainer{
    background: #f0f2f5;
    padding-top: 10px;
    padding-right: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow: auto;
  }
  .fitContainer .contents{
    background: #fff;
    padding: 6px;
    padding-right: 16px;

    min-height: 100%;
    box-sizing: border-box;
  }
  .fitContentBox{
    margin: auto;
    width: 100%;
    max-width: 1300px;
  }
</style>

